<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
	<style>
		body {
			background: url("../images/1.jfif");
			background-repeat: no-repeat;
			background-size: 100% auto;
		}

		#login-box {
			width: 375px;
			height: 375px;
			margin: 0 auto;
			margin-top: 13%;
			background-color: rgba(244, 251, 251, 0.5)
		}

		#login-box h1 {
			padding-top: 30px;
			color: #fff;
		}

		#login-box .form .item {
			margin-top: 15px;
		}

		#login-box .form .item i {
			font-size: 18px;
			color: #fff;
		}

		#login-box .form .item input {
			width: 180px;
			font-size: 18px;
			border: 0;
			border-bottom: 2px solid #fff;
			padding: 5px 10px;
			background: #ffffff00;
			color: #fff;
		}

		#login-box button {
			margin-top: 20px;
			width: 190px;
			height: 30px;
			font-size: 20px;
			font-weight: 700;
			color: #fff;
			background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
			border: 0;
			border-radius: 15px;
		}

		.title {
			width: 200px;
			overflow: hidden;
			display: inline-block;
			height: 20px;
			line-height: 20px;
		}
	</style>
</head>

<body>
	<div id="login-box">
		<form action="#" id="form">
			<h1 style="text-align: center;color: #333;">主页</h1>

			<div>
				<input type="button" class="button" onclick='location.href=("login.html")' value="登录">
				<input type="button" class="button" onclick='location.href=("register.html")' value="注册">
				<a href="./addnote.html">添加笔记</a>
				<ul class="list">
					<li>
						<p class="title"></p>
						<a href="/">删除</a>
						<a href="/">修改</a>
					</li>
				</ul>
			</div>
		</form>
	</div>
	<script>
		(async function () {
			let btn = document.querySelectorAll("button");
			let list = document.querySelector('.list');
			let { data } = await axios("http://localhost:3000/notes");
			let str = ``;
			data.forEach(item => {
				str += `
					<li>
						<span class="title">${item.title}</span>
						<a href="javascript:;" class="delBtn" _id=${item.id}>删除</a>
						<a href="./updatenote.html?id=${item.id}">修改</a>
					</li>
				`;
			});
			list.innerHTML = str;

			let delBtn = document.querySelectorAll('.delBtn');
			// console.log(delBtn);

			delBtn.forEach(btn=>{
				btn.onclick = function(){
					// console.log(this.getAttribute('_id'));

					let id = this.getAttribute('_id');

				    axios({
						method:"delete",
						url:`http://localhost:3000/notes/${id}`
					}).then(val=>{
						window.location.href = './index.html'
					})
				}
			})
		})()

	</script>
</body>

</html>